<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 保持原有meta和title不变 -->
    <style>
        /* 新增弹窗样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .reset-modal {
            background: rgba(255,255,255,0.98);
            padding: 2rem;
            border-radius: 15px;
            width: 90%;
            max-width: 400px;
            position: relative;
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from { transform: translateY(-20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .close-btn {
            position: absolute;
            top: 1rem;
            right: 1rem;
            cursor: pointer;
            color: #718096;
            font-size: 1.5rem;
            line-height: 1;
        }

        /* 修改原有链接样式 */
        .links a { transition: color 0.2s; }
        .links a:hover { color: #764ba2; }
    </style>
</head>
<body>
    <div class="login-box">
        <!-- 原有登录表单保持不变 -->
        <div class="links">
            <a href="#" onclick="showResetModal()">忘记密码？</a> | <a href="#">注册新账号</a>
        </div>
    </div>

    <!-- 新增找回密码弹窗 -->
    <div class="modal-overlay" id="resetModal">
        <div class="reset-modal">
            <span class="close-btn" onclick="hideResetModal()">&times;</span>
            <h2>重置密码</h2>
            <form onsubmit="handleResetSubmit(event)">
                <div class="input-group">
                    <input type="email" placeholder="注册邮箱" required>
                </div>
                <button type="submit">发送重置链接</button>
                <p style="margin-top:1rem; font-size:0.9rem; color:#718096;">
                    我们将发送包含重置链接的邮件到您的注册邮箱
                </p>
            </form>
        </div>
    </div>

    <script>
        // 弹窗控制逻辑
        function showResetModal() {
            document.getElementById('resetModal').style.display = 'flex';
        }

        function hideResetModal() {
            document.getElementById('resetModal').style.display = 'none';
        }

        // 表单提交处理
        function handleResetSubmit(e) {
            e.preventDefault();
            alert('重置链接已发送至您的邮箱，请查收！');
            hideResetModal();
        }

        // 点击遮罩层关闭
        document.getElementById('resetModal').addEventListener('click', function(e) {
            if(e.target === this) hideResetModal();
        });
    </script>
</body>
</html>
